<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<!--  -->
	<div class="w-full flex flex-col items-center">
		<!--  导航菜单 -->
		<header class="flex flex-row gap-4 py-2">
			<div>
				<!-- logo -->
				<img src="/images/logo.png">
			</div>
			<nav class="flex-1">
				<ul
					class="flex flex-row justify-center font-bold [&>li]:h-[65px] [&>li]:p-4 [&>li]:hover:text-[#d9eb60] [&>li]:cursor-pointer gap-4">
					<li>
						<a href="./index.html">首页</a>
					</li>
					<li>
						<a href="#">导师阵容</a>
					</li>
					<li>
						<a href="./ranking.html">排名展示</a>
					</li>
					<li>
						<a href="#">动态加权池</a>
					</li>
					<li>
						<a href="#">授业解惑</a>
					</li>
					<li>
						<a href="#">互动中心</a>
					</li>
					<li>
						<a href="./student.html">学员介绍</a>
					</li>
					<li>
						<a href="./news.html">新闻资讯</a>
					</li>
					<li>
						<a href="#">关于我们</a>
					</li>
				</ul>
			</nav>
		</header>

		<!--  -->
		<div
			class="w-full h-[600px] flex flex-col items-center bg-[url(/images/index/6de9993e47d3705794db9817ebbab12f.png)] bg-cover bg-center">
			<!-- <div class="w-[1200px] border border-red-400">1</div> -->
		</div>
		<div class="w-full h-[800px] flex flex-col items-center bg-[url(/images/index/bg_01.png)] bg-cover bg-center">
			<header class="flex flex-col justify-center items-center py-10">
				<h2 class="text-4xl font-bold">导师阵容</h2>
				<div class="w-15 h-1.5 mt-10 mb-6 bg-[#d9eb60]"></div>
				<p class="text-base">顶尖交易导师领航，助你交易之路更精彩</p>
			</header>
			<div class="w-[1200px] h-[500px] flex flex-row justify-center gap-6">
				<div
					class="w-[180px] flex flex-row rounded-lg bg-white transform transition-all duration-500 relative hover:w-[540px] hover:origin-right group">
					<div
						class="hidden p-4 text-black group-hover:flex group-hover:flex-col w-[235px] h-full absolute border border-black/5">
						<h3 class="text-2xl font-bold">张聚贤</h3>
						<h4 class="text-lg">明星导师</h4>
						<span class="text-xs my-4">导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介</span>
						<h3 class="text-xl font-bold text-[#d9eb60] my-4">战队成员</h3>
						<table
							class="[&_td]:text-[#8e8e8e] [&_td_span]:text-xs [&_td_span]:border-b [&_td_span]:border-[#8e8e8e] [&_td]:py-3 [&_span]:py-2">
							<tbody>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="hidden w-[235px] h-full group-hover:block absolute right-0 overflow-hidden">
						<img src="/images/index/x111.png" alt="">
					</div>
					<div class="w-full h-full group-hover:hidden absolute flex flex-col items-center justify-center">
						<div class="w-[80px] h-[80px] bg-black rounded-full bg-[url(/images/index/ds_cr.png)] bg-cover bg-center">
						</div>
						<h3 class="text-[#d9eb60] text-xl font-bold mt-10 mb-4">
							明星导师
						</h3>
						<h4 class="text-[#d9eb60] text-xl">
							邵悦华
						</h4>
					</div>
				</div>
				<div
					class="w-[180px] flex flex-row rounded-lg bg-white transform transition-all duration-500 relative hover:w-[540px] hover:origin-right group">
					<div
						class="hidden p-4 text-black group-hover:flex group-hover:flex-col w-[235px] h-full absolute border border-black/5">
						<h3 class="text-2xl font-bold">张聚贤</h3>
						<h4 class="text-lg">明星导师</h4>
						<span class="text-xs my-4">导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介</span>
						<h3 class="text-xl font-bold text-[#d9eb60] my-4">战队成员</h3>
						<table
							class="[&_td]:text-[#8e8e8e] [&_td_span]:text-xs [&_td_span]:border-b [&_td_span]:border-[#8e8e8e] [&_td]:py-3 [&_span]:py-2">
							<tbody>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="hidden w-[235px] h-full group-hover:block absolute right-0">
						<img src="/images/index/x111.png" alt="">
					</div>
					<div class="w-full h-full group-hover:hidden absolute flex flex-col items-center justify-center">
						<div class="w-[80px] h-[80px] bg-black rounded-full bg-[url(/images/index/ds_cr.png)] bg-cover bg-center">
						</div>
						<h3 class="text-[#d9eb60] text-xl font-bold mt-10 mb-4">
							明星导师
						</h3>
						<h4 class="text-[#d9eb60] text-xl">
							邵悦华
						</h4>
					</div>
				</div>
				<div
					class="w-[180px] flex flex-row rounded-lg bg-white transform transition-all duration-500 relative hover:w-[540px] hover:origin-right group">
					<div
						class="hidden p-4 text-black group-hover:flex group-hover:flex-col w-[235px] h-full absolute border border-black/5">
						<h3 class="text-2xl font-bold">张聚贤</h3>
						<h4 class="text-lg">明星导师</h4>
						<span class="text-xs my-4">导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介</span>
						<h3 class="text-xl font-bold text-[#d9eb60] my-4">战队成员</h3>
						<table
							class="[&_td]:text-[#8e8e8e] [&_td_span]:text-xs [&_td_span]:border-b [&_td_span]:border-[#8e8e8e] [&_td]:py-3 [&_span]:py-2">
							<tbody>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="hidden w-[235px] h-full group-hover:block absolute right-0 overflow-hidden">
						<img src="/images/index/x111.png" alt="">
					</div>
					<div class="w-full h-full group-hover:hidden absolute flex flex-col items-center justify-center">
						<div class="w-[80px] h-[80px] bg-black rounded-full bg-[url(/images/index/ds_cr.png)] bg-cover bg-center">
						</div>
						<h3 class="text-[#d9eb60] text-xl font-bold mt-10 mb-4">
							明星导师
						</h3>
						<h4 class="text-[#d9eb60] text-xl">
							邵悦华
						</h4>
					</div>
				</div>
				<div
					class="w-[180px] flex flex-row rounded-lg bg-white transform transition-all duration-500 relative hover:w-[540px] hover:origin-right group">
					<div
						class="hidden p-4 text-black group-hover:flex group-hover:flex-col w-[235px] h-full absolute border border-black/5">
						<h3 class="text-2xl font-bold">张聚贤</h3>
						<h4 class="text-lg">明星导师</h4>
						<span class="text-xs my-4">导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介</span>
						<h3 class="text-xl font-bold text-[#d9eb60] my-4">战队成员</h3>
						<table
							class="[&_td]:text-[#8e8e8e] [&_td_span]:text-xs [&_td_span]:border-b [&_td_span]:border-[#8e8e8e] [&_td]:py-3 [&_span]:py-2">
							<tbody>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="hidden w-[235px] h-full group-hover:block absolute right-0 overflow-hidden">
						<img src="/images/index/x111.png" alt="">
					</div>
					<div class="w-full h-full group-hover:hidden absolute flex flex-col items-center justify-center">
						<div class="w-[80px] h-[80px] bg-black rounded-full bg-[url(/images/index/ds_cr.png)] bg-cover bg-center">
						</div>
						<h3 class="text-[#d9eb60] text-xl font-bold mt-10 mb-4">
							明星导师
						</h3>
						<h4 class="text-[#d9eb60] text-xl">
							邵悦华
						</h4>
					</div>
				</div>
				<div
					class="w-[180px] flex flex-row rounded-lg bg-white transform transition-all duration-500 relative hover:w-[540px] hover:origin-right group">
					<div
						class="hidden p-4 text-black group-hover:flex group-hover:flex-col w-[235px] h-full absolute border border-black/5">
						<h3 class="text-2xl font-bold">张聚贤</h3>
						<h4 class="text-lg">明星导师</h4>
						<span class="text-xs my-4">导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介导师简介</span>
						<h3 class="text-xl font-bold text-[#d9eb60] my-4">战队成员</h3>
						<table
							class="[&_td]:text-[#8e8e8e] [&_td_span]:text-xs [&_td_span]:border-b [&_td_span]:border-[#8e8e8e] [&_td]:py-3 [&_span]:py-2">
							<tbody>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
								<tr>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
									<td>
										<span>用户名称</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="hidden w-[235px] h-full group-hover:block absolute right-0 overflow-hidden">
						<img src="/images/index/x111.png" alt="">
					</div>
					<div class="w-full h-full group-hover:hidden absolute flex flex-col items-center justify-center">
						<div class="w-[80px] h-[80px] bg-black rounded-full bg-[url(/images/index/ds_cr.png)] bg-cover bg-center">
						</div>
						<h3 class="text-[#d9eb60] text-xl font-bold mt-10 mb-4">
							明星导师
						</h3>
						<h4 class="text-[#d9eb60] text-xl">
							邵悦华
						</h4>
					</div>
				</div>
			</div>
		</div>
		<div class="w-full p-4 bg-white text-black flex flex-col items-center">
			<header class="flex flex-col justify-center items-center py-10">
				<h2 class="text-4xl font-bold">总排名展示</h2>
				<div class="w-15 h-1.5 mt-10 mb-6 bg-[#d9eb60]"></div>
				<p class="text-base">交易实力一目了然，双组别分级竞技，实时榜单公开透明</p>
			</header>
			<div class="w-[1200px] grid grid-cols-2 gap-8">
				<div class="rounded-md border border-black/5 shadow-2xl p-6">
					<header class="flex flex-row items-center justify-between">
						<div class="flex flex-row items-center gap-4">
							<img src="/images/index/sm_wg_1.png" alt="">
							<h3 class="text-xl font-bold">
								重量级排行榜
							</h3>
						</div>
						<a href="#" class="text-sm bg-[#d9eb60] text-white px-2 py-1.5 rounded-full">
							账户净值>10,000美元
						</a>
					</header>
					<table
						class="w-full text-[#5d5d5d] [&_tr]:border-[#cfd4da] [&_tr:not(:last-child)]:border-b [&_thead_tr]:border-b-2 [&_th]:text-left [&_th]:py-4 [&_th]:px-4 [&_td]:py-4 [&_td]:px-4">
						<thead>
							<tr>
								<th>排名</th>
								<th>昵称</th>
								<th>账号</th>
								<th>盈利金额</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center bg-[#eab309] text-white rounded-2xl">1</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center bg-[#cfd4da] text-white rounded-2xl">2</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center bg-[#db7701] text-white rounded-2xl">3</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">4</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">5</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">6</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">7</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">8</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">9</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">10</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="rounded-md border border-black/5 shadow-2xl p-6">
					<header class="flex flex-row items-center justify-between">
						<div class="flex flex-row items-center gap-4">
							<img src="/images/index/sm_wg_1.png" alt="">
							<h3 class="text-xl font-bold">
								轻量级排行榜
							</h3>
						</div>
						<a href="#" class="text-sm bg-[#d9eb60] text-white px-2 py-1.5 rounded-full">
							账户净值>10,000美元
						</a>
					</header>
					<table
						class="w-full text-[#5d5d5d] [&_tr]:border-[#cfd4da] [&_tr:not(:last-child)]:border-b [&_thead_tr]:border-b-2 [&_th]:text-left [&_th]:py-4 [&_th]:px-4 [&_td]:py-4 [&_td]:px-4">
						<thead>
							<tr>
								<th>排名</th>
								<th>昵称</th>
								<th>账号</th>
								<th>盈利金额</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center bg-[#eab309] text-white rounded-2xl">1</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center bg-[#cfd4da] text-white rounded-2xl">2</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center bg-[#db7701] text-white rounded-2xl">3</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">4</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">5</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">6</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">7</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">8</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">9</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
							<tr>
								<td>
									<span class="w-5 h-5 block text-center">10</span>
								</td>
								<td>张三</td>
								<td>1234567890</td>
								<td>
									<span class="text-[#06943f] font-bold">482890</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="flex flex-row justify-center items-center gap-8 my-10">
				<a href="#" class="px-12 py-2 rounded-full bg-[#a9d052] text-xl">
					更多排名
				</a>
				<a href="#" class="px-12 py-2 rounded-full border border-[#a9d052] text-xl text-[#a9d052]">我要报名</a>
			</div>
			<span class="text-xs ">

				<pre class="text-[#cfd4da] text-center">
                    <span class="text-red-500">*</span>本榜单为“中国好交易”数据总排名榜单，统计周期自2025年9月1日起，涵盖昨日的累计排名情况。
                    榜单实行每日上午定期更新机制，若遇特殊情况，更新安排将有广泛提前通知
                </pre>
			</span>
		</div>
		<div class="w-full h-[800px] bg-[url(/images/index/bg_02.png)] bg-cover bg-center flex flex-col items-center">
			<header class="flex flex-col justify-center items-center py-10">
				<h2 class="text-4xl font-bold">动态加权池</h2>
				<div class="w-15 h-1.5 mt-10 mb-6 bg-[#d9eb60]"></div>
				<p class="text-base">百万美元加权池，每一笔努力都有价值，加权激励机制实时更新！</p>
			</header>
			<div class="w-[1200px] flex flex-col items-center">
				<div class="w-full grid grid-cols-2">
					<div
						class="flex flex-col items-center gap-4 py-2 border-b-4 border-[#3f4c63] [&.selected]:border-[#ebb80f] cursor-pointer">
						<img src="/images/index/md_wg_1.png" alt="">
						<span>重量级动态加权池</span>
					</div>
					<div
						class="flex flex-col items-center gap-4 py-2 border-b-4 border-[#3f4c63] [&.selected]:border-[#ebb80f] cursor-pointer selected">
						<img src="/images/index/md_xx_1.png" alt="">
						<span>清量级动态加权池</span>
					</div>
				</div>
				<div class="w-full flex flex-row  justify-start py-8">
					<div class="w-4/7 flex flex-col bg-white/10 rounded-xl py-6 ps-6 pe-16 gap-4">
						<div class="flex flex-row items-center gap-4">
							<div>
								<img src="/images/index/e44a7ca360375c5db11efe5497867950.png" alt="">
							</div>
							<div class="flex flex-col">
								<h3 class="text-2xl text-[#06943f]">当前奖池总额</h3>
								<span class="text-sm">每新增1位选手，奖金池增加$999</span>
							</div>
						</div>
						<h3 class="text-3xl text-[#06943f] font-bold">$1,435,456</h3>
						<div class="flex flex-col">
							<div class="w-full h-4 rounded-full bg-white">
								<div class="w-[70%] h-4 rounded-full bg-linear-to-r from-[#a9d052] to-[#06943f]">
								</div>
							</div>
							<div class="flex flex-row justify-between text-xs mt-2">
								<span>0</span>
								<span>1000席位</span>
							</div>
						</div>

						<div class="w-full rounded-md bg-white p-4 flex flex-row gap-4 text-black">
							<div>
								<img src="/images/index/ba8b77b2fbf1756e7930b0de7db5bd0e.png" alt="">
							</div>
							<div class="flex flex-col text-sm">
								<span class="text-[#676767]">剩余席位: 823/1000</span>
								<span class="text-[#8e8e8e]">奖金池随参赛人数增加而增长</span>
							</div>
						</div>
					</div>
					<div>
						<img src="/images/index/png_sbjr.png" alt="">
					</div>
				</div>
				<a href="#" class="w-1/2 px-12 py-2 rounded-full bg-[#a9d052] text-black text-xl text-center cursor-pointer">
					我要报名
				</a>
			</div>
		</div>
		<div class="w-full flex flex-col items-center p-4">
			<header class="flex flex-col justify-center items-center py-10">
				<h2 class="text-4xl font-bold">学员风采</h2>
				<div class="w-15 h-1.5 mt-10 mb-6 bg-[#d9eb60]"></div>
			</header>
			<div class="w-[1200px]">
				<div class="w-full flex flex-row items-center relative">
					<div
						class="w-2/5 h-[360px] py-8 ps-8 pe-10 bg-white/5 bg-[url(/images/index/bg_03.png)] bg-no-repeat bg-cover shadow-lg shadow-white/40">
						<h2 class="text-2xl" id="curerntStudentName">交易小王子</h2>
						<div class="w-[10%] h-4 my-4 border-b border-white"></div>
						<ul class="[&>li]:py-2">
							<li id="currentStudentAccount">账号:4534522</li>
							<li>战绩:58%</li>
							<li>所属战队:章维军导师战队</li>
							<li>导师评价:这里是导师评价，这里是导师评价，这里是导师评价，这里是导师评价，这里是导师评价</li>
						</ul>
					</div>
					<div id="currentStudentVideo" class="w-5/8 h-[280px] bg-white text-black absolute right-0">视频区</div>
				</div>
				<div id="studentSlider"
					class="flex flex-row items-center justify-center my-4 [&>a]:w-3 [&>a]:h-3 [&>a]:rounded-full [&>a]:border [&>a]:border-white [&>a]:cursor-pointer gap-6 [&>a.selected]:bg-white">
					<a href="javascript:;" class="selected"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
				</div>
			</div>
		</div>
		<div class="w-full flex flex-col items-center p-4 bg-white">
			<header class="flex flex-col justify-center items-center py-10">
				<h2 class="text-4xl text-black font-bold">导师风采</h2>
				<div class="w-15 h-1.5 mt-10 mb-6 bg-[#d9eb60]"></div>
			</header>
			<div class="w-[1200px] flex flex-col ">
				<div class="grid grid-cols-4 gap-4 text-black">
					<div class="flex flex-col items-center gap-4 px-4 cursor-pointer group teacher 
						selected 
						[&.selected>.header]:border-[#a9d052] 
					  [&.selected>.teacher-name]:bg-[#a9d052] 
					  [&.selected>.teacher-name]:text-white">
						<div
							class="w-[100px] h-[100px] bg-black rounded-full overflow-hidden border group-hover:border-[#d9eb60] header">
							<img src="/images/index/ds_syh.png" alt="">
						</div>
						<div class="px-12 py-2 rounded-full teacher-name text-xl group-hover:bg-[#d9eb60] group-hover:text-white">
							章维军导师
						</div>
					</div>

					<div class="flex flex-col items-center gap-4 px-4 cursor-pointer group teacher 
						[&.selected>.header]:border-[#a9d052] 
					  [&.selected>.teacher-name]:bg-[#a9d052] 
					  [&.selected>.teacher-name]:text-white">
						<div
							class="w-[100px] h-[100px] bg-black rounded-full overflow-hidden border group-hover:border-[#d9eb60] header">
							<img src="/images/index/ds_syh.png" alt="">
						</div>
						<div class="px-12 py-2 rounded-full teacher-name text-xl group-hover:bg-[#d9eb60] group-hover:text-white">
							章维军导师
						</div>
					</div>

					<div class="flex flex-col items-center gap-4 px-4 cursor-pointer group teacher 
						[&.selected>.header]:border-[#a9d052] 
					  [&.selected>.teacher-name]:bg-[#a9d052] 
					  [&.selected>.teacher-name]:text-white">
						<div
							class="w-[100px] h-[100px] bg-black rounded-full overflow-hidden border group-hover:border-[#d9eb60] header">
							<img src="/images/index/ds_syh.png" alt="">
						</div>
						<div class="px-12 py-2 rounded-full teacher-name text-xl group-hover:bg-[#d9eb60] group-hover:text-white">
							章维军导师
						</div>
					</div>

					<div class="flex flex-col items-center gap-4 px-4 cursor-pointer group teacher 
						[&.selected>.header]:border-[#a9d052] 
					  [&.selected>.teacher-name]:bg-[#a9d052] 
					  [&.selected>.teacher-name]:text-white">
						<div
							class="w-[100px] h-[100px] bg-black rounded-full overflow-hidden border group-hover:border-[#d9eb60] header">
							<img src="/images/index/ds_syh.png" alt="">
						</div>
						<div class="px-12 py-2 rounded-full teacher-name text-xl group-hover:bg-[#d9eb60] group-hover:text-white">
							章维军导师
						</div>
					</div>
				</div>
				<div class="w-11/13 h-140 mt-10 mb-2 mx-auto bg-[#12161f] text-white">
					这里是点击导师姓名后要变化的内容
				</div>
			</div>
		</div>
		<div class="w-full flex flex-col items-center p-4 bg-white text-black">
			<header class="flex flex-col justify-center items-center py-10">
				<h2 class="text-4xl font-bold">新闻资讯</h2>
				<div class="w-15 h-1.5 mt-10 mb-6 bg-[#d9eb60]"></div>
				<p class="text-base">关注大赛官方动态，第一时间了解榜单更新、战队变动、导师观点、选手采访及每一刻的精彩交易新闻</p>
			</header>
			<div class="w-[1200px] grid grid-cols-3 gap-4">
				<div
					class="w-full rounded-xl p-8 border flex flex-col gap-4 border-[#e5e5e5] shadow-2xl transform transition-all duration-300 hover:-translate-y-2.5">
					<div class="-mx-8 -mt-8">
						<img src="/images/index/xinwen1.png" class="w-full" alt="">
					</div>
					<div class="flex flex-row items-center gap-2">
						<span class="block px-2 py-1 rounded-md bg-[#d9eb60]">赛况更新</span>
						<span class="text-[#999999]">2025-08-19</span>
					</div>
					<h3 class="text-xl font-bold">
						首周比赛战况激烈，重量级选手表现抢眼
					</h3>
					<div class="text-sm text-[#999999]">
						首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼
					</div>
					<a class="text-sm text-[#999999] hover:text-[#d9eb60]" href="#">阅读更多>></a>
				</div>
				<div
					class="w-full rounded-xl p-8 border flex flex-col gap-4 border-[#e5e5e5] shadow-2xl transform transition-all duration-300 hover:-translate-y-2.5">
					<div class="-mx-8 -mt-8">
						<img src="/images/index/xinwen1.png" class="w-full" alt="">
					</div>
					<div class="flex flex-row items-center gap-2">
						<span class="block px-2 py-1 rounded-md bg-[#06943f] text-white">导师观点</span>
						<span class="text-[#999999]">2025-08-19</span>
					</div>
					<h3 class="text-xl font-bold">
						首周比赛战况激烈，重量级选手表现抢眼
					</h3>
					<div class="text-sm text-[#999999]">
						首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼
					</div>
					<a class="text-sm text-[#999999] hover:text-[#d9eb60]" href="#">阅读更多</a>
				</div>
				<div
					class="w-full rounded-xl p-8 border flex flex-col gap-4 border-[#e5e5e5] shadow-2xl transform transition-all duration-300 hover:-translate-y-2.5">
					<div class="-mx-8 -mt-8">
						<img src="/images/index/xinwen1.png" class="w-full" alt="">
					</div>
					<div class="flex flex-row items-center gap-2">
						<span class="block px-2 py-1 rounded-md bg-[#e2fee9] text-[#06943f]">选手采访</span>
						<span class="text-[#999999]">2025-08-19</span>
					</div>
					<h3 class="text-xl font-bold">
						首周比赛战况激烈，重量级选手表现抢眼
					</h3>
					<div class="text-sm text-[#999999]">
						首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼首周比赛战况激烈，重量级选手表现抢眼
					</div>
					<a class="text-sm text-[#999999] hover:text-[#d9eb60]" href="#">阅读更多</a>
				</div>
			</div>

		</div>
		<footer>
			<div class="w-[1200px] grid grid-cols-5 gap-4 px-12 py-16">
				<ul class="[&>li]:py-2">
					<li class="text-xl font-bold">
						关于我们
					</li>
					<li>
						主办方：梧桐财经
					</li>
					<li>
						首席赞助商
					</li>
					<li>
						<img src="/images/logo.png">
					</li>
				</ul>

				<ul class="[&>li]:py-2">
					<li class="text-xl font-bold">
						导师团队
					</li>
					<li>
						邵悦华
					</li>
					<li>
						章维军
					</li>
					<li>
						张聚贤
					</li>
					<li>
						崔荣
					</li>
				</ul>

				<ul class=" [&>li]:py-2">
					<li class=" text-xl font-bold">
						加入我们
					</li>
					<li>
						<a href="#">我要开户</a>
					</li>
					<li>
						<a href="#">我要报名</a>
					</li>
				</ul>

				<div>
					<img src="/images/index/erweima.png" alt="">
					<span>公众号二维码</span>
				</div>
				<div>
					<img src="/images/index/erweima.png" alt="">
					<span>公众号二维码</span>
				</div>
			</div>
		</footer>
	</div>
	<script>

		// 学员风采
		const data = [
			{ student_name: '交易小王子', account: 4534522, video: '视频地址1' },
			{ student_name: '交易小公主', account: 4534521, video: '视频地址2' },
			{ student_name: '交易小王爷', account: 4534520, video: '视频地址3' },
			{ student_name: '交易小驸马', account: 4534519, video: '视频地址4' },
		]

		const studentSlider = document.querySelectorAll('#studentSlider>a');
		const currentStudentName = document.getElementById('curerntStudentName');
		const currentStudentAccount = document.getElementById('currentStudentAccount');
		const currentStudentVideo = document.getElementById('currentStudentVideo');

		studentSlider.forEach((item, index) => {
			item.addEventListener('click', () => {
				studentSlider.forEach(item => item.classList.remove('selected'));
				item.classList.add('selected');
				currentStudentName.textContent = data[index].student_name;
				currentStudentAccount.textContent = `账号:${data[index].account}`;
				currentStudentVideo.innerText = data[index].video;
			});
		});

		// 导师风采
		const teacher = document.querySelectorAll('.teacher');
		teacher.forEach(item => {
			item.addEventListener('click', () => {
				teacher.forEach(item => item.classList.remove('selected'));
				item.classList.add('selected');
			});
		});
	</script>
</body>

</html>